<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="css/resiter.css">  <!-- 引入 CSS 文件 -->
</head>
<body>
<div class="login-container">
    <h2>注册界面</h2>
    <form id="registerForm" enctype="multipart/form-data">
        <!-- 用户名 -->
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" class="input-field" placeholder="请输入用户名">
        </div>

        <!-- 密码 -->
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" class="input-field" placeholder="请输入密码">
        </div>

        <!-- 手机号 -->
        <div class="form-group">
            <label for="phone">手机号：</label>
            <input type="text" id="phone" class="input-field" placeholder="请输入手机号">
        </div>

        <!-- 邮箱 -->
        <div class="form-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email" class="input-field" placeholder="请输入邮箱">
        </div>

        <!-- 姓名 -->
        <div class="form-group">
            <label for="full_name">姓名：</label>
            <input type="text" id="full_name" class="input-field" placeholder="请输入姓名">
        </div>

        <!-- 性别 -->
        <div class="form-group">
            <label for="gender">性别：</label>
            <select id="gender" class="input-field">
                <option value="male">男</option>
                <option value="female">女</option>
                <option value="other">其他</option>
            </select>
        </div>

        <!-- 出生日期 -->
        <div class="form-group">
            <label for="birth_date">出生日期：</label>
            <input type="date" id="birth_date" class="input-field">
        </div>

        <!-- 地址 -->
        <div class="form-group">
            <label for="address">地址：</label>
            <input type="text" id="address" class="input-field" placeholder="请输入地址">
        </div>

        <!-- 头像上传 -->
        <div class="form-group">
            <label for="avatar">头像：</label>
            <input type="file" id="avatar" class="input-field">
        </div>

        <!-- 账户角色 -->
        <div class="form-group">
            <label for="role">账户角色：</label>
            <select id="role" class="input-field">
                <option value="user">普通用户</option>
                <option value="seller">商家</option>
                <option value="admin">管理员</option>
            </select>
        </div>

        <!-- 按钮 -->
        <div class="button-group">
            <button type="submit" class="btn-primary">注册</button>
            <button type="button" class="btn-secondary" onclick="redirectToLogin()">已有账号去登录</button>
        </div>
    </form>

    <!-- 反馈消息区域 -->
    <div id="feedbackMessage"></div>
</div>

<script>
    // 重定向到登录页面
    function redirectToLogin() {
        window.location.href = "login.html"; // 假设登录页面为 login.html
    }

    document.getElementById('registerForm').addEventListener('submit', async function(event) {
        event.preventDefault(); // 防止页面刷新

        // 获取表单数据
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const phone = document.getElementById('phone').value;
        const email = document.getElementById('email').value;
        const fullName = document.getElementById('full_name').value;
        const gender = document.getElementById('gender').value;
        const birthDate = document.getElementById('birth_date').value;
        const address = document.getElementById('address').value;
        const avatar = document.getElementById('avatar').files[0]; // 获取上传的头像文件
        const role = document.getElementById('role').value;

        // 创建表单数据对象
        const formData = new FormData();
        formData.append('username', username);
        formData.append('password', password);
        formData.append('phone', phone);
        formData.append('email', email);
        formData.append('fullName', fullName);
        formData.append('gender', gender);
        formData.append('birthDate', birthDate);
        formData.append('address', address);
        formData.append('avatar', avatar);  // 上传头像文件
        formData.append('role', role);

        try {
            // 发送请求到后端
            const response = await fetch('http://localhost:8080/api/auth/register', {
                method: 'POST',
                body: formData
            });

            // 处理响应
            const result = await response.json();
            if (response.ok && result.status === "success") {
                // 注册成功的反馈
                document.getElementById('feedbackMessage').textContent = result.message;
                document.getElementById('feedbackMessage').style.color = 'green';

                // 注册成功时跳转到登录页面
                setTimeout(() => {
                    window.location.href = 'index.html'; // 2秒后跳转
                }, 2000);
            } else {
                // 注册失败的反馈
                document.getElementById('feedbackMessage').textContent = result.message || '注册失败，请重试！';
                document.getElementById('feedbackMessage').style.color = 'red';
            }
        } catch (error) {
            // 网络或其他错误
            document.getElementById('feedbackMessage').textContent = '网络错误，请稍后再试。';
            document.getElementById('feedbackMessage').style.color = 'red';
        }
    });
</script>
</body>
</html>
